<template>
  <!-- 表单组件 可在使用时 添加 flex-form 类名来进行单排排序 用于头部筛选搜索 :label-width="labelWidth" -->
  <el-form ref="form-element" :rules="rules" :model="form" :size="size" :data-type="type">
    <slot :data="form" />
    <el-form-item class="btn-item">
      <el-button
        v-show="showBtn.search"
        type="primary"
        icon="el-icon-search"
        @click="clickSearchBtn"
      >查询</el-button>
      <el-button
        v-show="showBtn.cancel"
        @click="clickCancelBtn"
      >取消</el-button>
      <el-button
        v-show="showBtn.law"
        type="primary"
        @click="clickLawBtn"
      ><i class="icon iconfont">&#xe7a4;</i> 规律分析</el-button>
      <el-button
        v-show="showBtn.call"
        type="primary"
        @click="clickCallBtn"
      ><i class="icon iconfont">&#xe7a4;</i> 通话分析</el-button>
      <el-button
        v-show="showBtn.message"
        type="primary"
        @click="clickMessageBtn"
      ><i class="icon iconfont">&#xe7a4;</i> 短信分析</el-button>
      <el-button
        v-show="showBtn.reset"
        type="warning"
        icon="el-icon-refresh-right"
        @click="resetForm"
      >重置</el-button>
      <el-button
        v-show="showBtn.add"
        type="primary"
        icon="el-icon-plus"
        class="old-btn"
        @click="clickAddBtn"
      >新增</el-button>
      <el-button
        v-show="showBtn.startModel"
        type="primary"
        icon="el-icon-plus"
        :disabled="disableModel"
        @click="clickStartModelBtn"
      >开始建模</el-button>
      <el-button
        v-show="showBtn.resetModel"
        type="danger"
        icon="el-icon-refresh"
        :disabled="showBtn.disableResetModel"
        @click="clickResetModelBtn"
      >重新建模</el-button>
      <el-button
        v-show="showBtn.refresh"
        type="primary"
        icon="el-icon-refresh"
        class="old-btn"
        @click="clickRefreshBtn"
      >刷新</el-button>
      <el-button
        v-show="showBtn.save"
        type="primary"
        @click="clickSaveBtn"
      >保存</el-button>
      <el-button
        v-show="showBtn.import"
        type="success"
        class="old-btn"
        @click="clickImportBtn"
      ><i class="icon iconfont">&#xe7a5;</i> 导入</el-button>
      <el-button
        v-show="showBtn.out"
        type="warning"
        class="old-btn"
        @click="clickOutBtn"
      ><i class="icon iconfont">&#xe7aa;</i> 导出</el-button>
      <el-button
        v-show="showBtn.outModel"
        type="primary"
        @click="clickOutModelBtn"
      ><i class="icon iconfont">&#xe7aa;</i> 导出模板</el-button>
      <el-button
        v-show="showBtn.remove"
        type="danger"
        icon="el-icon-delete"
        class="old-btn"
        @click="clickRemoveBtn"
      >删除</el-button>
      <el-button
        v-show="showBtn.sure"
        type="primary"
        @click="clickSureBtn"
      >确认提交</el-button>
      <el-button
        v-show="showBtn.submit"
        type="primary"
        icon="el-icon-circle-check"
        @click="clickSubmitBtn"
      >提交</el-button>
      <el-button
        v-show="showBtn.submit2"
        type="primary"
        @click="clickSubmit2Btn"
      >提交</el-button>
      <el-button
        v-show="showBtn.statistics"
        type="success"
        @click="clickStatisticsBtn"
      ><i class="icon iconfont">&#xeac5;</i> 生成报告</el-button>
      <el-button
        v-show="showBtn.checkStatic"
        type="success"
        @click="clickCheckBtn"
      ><i class="icon iconfont">&#xe7a4;</i> 查看报告</el-button>
      <el-button
        v-show="showBtn.reply"
        type="primary"
        icon=""
        @click="clickReplyBtn"
      >回复</el-button>
      <el-button
        v-show="showBtn.comeback"
        type="warning"
        @click="clickComebackBtn"
      ><i class="icon iconfont">&#xe7ad;</i> 返回</el-button>
      <el-button
        v-show="showBtn.login"
        class="login-btn"
        @click="loginBtn"
      >登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'BaseForm',
  props: {
    form: {
      // 表单每一项的对象属性
      type: Object,
      default: () => {
        return {}
      }
    },
    rules: {
      // 表单校验规则
      type: Object,
      default: () => {
        return {}
      }
    },
    labelWidth: {
      // label项的宽度
      type: String,
      default: () => {
        return '90px'
      }
    },
    size: {
      // 表单大小
      type: String,
      default: () => {
        return 'medium'
      }
    },
    showBtn: {
      // 操作按钮的显示
      type: Object,
      default: () => {
        return {
          search: false,
          cancel: false,
          law: false,
          call: false,
          message: false,
          reset: false,
          add: false,
          refresh: false,
          save: false,
          import: false,
          out: false,
          remove: false,
          sure: false,
          submit: false,
          submit2: false,
          comeback: false,
          login: false,
          reply: false,
          statistics: false,
          checkStatic: false,
          startModel: false,
          disableModel: false,
          disableResetModel: false
        }
      }
    },
    // 自定义的重置按钮点击事件
    theReset: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    type: {
      type: String,
      default: () => {
        return 'normal'
      }
    },
    disableModel: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    clickSearchBtn() {
      this.$emit('click-search-btn')
    },
    clickCancelBtn() {
      this.$emit('click-cancel-btn')
    },
    clickLawBtn() {
      this.$emit('click-law-btn')
    },
    clickCallBtn() {
      this.$emit('click-call-btn')
    },
    clickMessageBtn() {
      this.$emit('click-message-btn')
    },
    resetForm() {
      if (this.theReset) {
        return this.$emit('click-reset-btn')
      }
      this.$refs['form-element'].resetFields()
    },
    clickAddBtn() {
      this.$emit('click-add-btn')
    },
    clickRefreshBtn() {
      this.$emit('click-refresh-btn')
    },
    clickSaveBtn() {
      if (this.rules) {
        this.$refs['form-element'].validate(valid => {
          // 通过验证
          if (valid) {
            return this.$emit('click-save-btn', true)
          } else {
            return this.$emit('click-save-btn', false)
          }
        })
      } else {
        this.$emit('click-save-btn')
      }
    },
    clickCheckBtn() {
      this.$emit('click-check-btn')
    },
    clickImportBtn() {
      this.$emit('click-import-btn')
    },
    clickOutBtn() {
      this.$emit('click-out-btn')
    },
    clickOutModelBtn() {
      this.$emit('click-out-model')
    },
    clickRemoveBtn() {
      this.$emit('click-remove-btn')
    },
    clickSureBtn() {
      this.$emit('click-sure-btn')
    },
    clickSubmitBtn() {
      this.$emit('click-submit-btn')
    },
    clickSubmit2Btn() {
      if (this.rules) {
        this.$refs['form-element'].validate(valid => {
          // 通过验证
          if (valid) {
            return this.$emit('click-submit2-btn', true)
          } else {
            return this.$emit('click-submit2-btn', false)
          }
        })
      } else {
        this.$emit('click-submit2-btn')
      }
    },
    clickStatisticsBtn() {
      this.$emit('click-statistics-btn')
    },
    clickReplyBtn() {
      this.$emit('click-reply-btn')
    },
    clickComebackBtn() {
      this.$emit('click-comeback-btn')
    },
    loginBtn() {
      this.$refs['form-element'].validate(valid => {
        // 通过验证
        if (valid) {
          this.$emit('login-btn', this.form)
        }
      })
    },
    clickStartModelBtn() {
      this.$emit('click-start-model-btn')
    },
    clickResetModelBtn() {
      this.$emit('click-reset-model-btn')
    }
  }
}
</script>

<style lang="less" scoped>
.btn-item {
  text-align: center;
  margin-top: 2.75rem;
  ::v-deep .el-form-item__content {
    //margin-left: 30px !important;
    .el-button--mini,
    .el-button--mini.is-round {
      padding-left: 10px;
      padding-right: 10px;
    }
    .el-button--primary {
      background-color: #409EFF;
      border-color: #409EFF;
      .icon {
        font-size: 1rem;
      }
    }
    .el-button--warning {
      background-color: #E6A23C;
      border-color: #E6A23C;
      .icon {
        font-size: 1rem;
      }
    }
    .el-button--success {
      background-color: #67C23A;
      border-color: #67C23A;
      .icon {
        font-size: 1rem;
      }
    }
  }
}

.login-btn {
  width: 13.33rem;
  height: 3.33rem;
  background: #00c1fe;
  border-radius: 2px;
  color: #ffffff;
  font-size: 16px;
  border: none;
  margin-left: auto;
  margin-right: auto;
}

.old-btn {
  display: none!important;
}

.el-form[data-type='search-mode'] {
  /deep/ .el-form-item {
    border: 1px solid #E6E6E6;
    border-radius: 2px;
    margin-bottom: 2rem!important;

    &.btn-item {
      border: none;
    }

    .el-input {
      width: 13.5rem!important;
    }

    label {
      background: #F0F0F0;
      padding: 0 1em 0 1em;
      min-width: 7em;
      text-align: center;
    }

    .el-input__inner {
      border: none;
    }
  }
}
</style>
